import { useState } from 'react'
import dayjs from 'dayjs'
import Image from 'next/image'
import copy from 'copy-to-clipboard'
import { Button } from '@nextui-org/react'

import iconDelete from '@/assets/icons/ic_delete.png'
import iconCopy from '@/assets/icons/ic_copy.png'
import iconCopyWhite from '@/assets/icons/ic_copy_white.png'

type T = {
  timeStamp: number
  content: string
  onDelete: () => any
  onCopy?: () => void
}

export default function Output(props: T) {
  const { timeStamp, content, onCopy, onDelete } = props
  const [isCopied, setIsCopied] = useState(false)

  const handleCopy = () => {
    copy(content, { format: 'text/plain' })
    onCopy?.()

    setIsCopied(true)
  }

  if (!content) return
  return (
    <div className="flex flex-col gap-2 w-full text-black rounded-[20px] max-sm:bg-[#EFEDFF] max-sm:border max-sm:border max-sm:shadow max-sm:px-2 max-sm:py-4">
      <div className="text-base font-bold">Output</div>
      <div className="flex flex-col border rounded-2xl bg-white w-full p-4 gap-4 max-sm:rounded-xl">
        <div className="text-small text-[#989898]">
          {dayjs(timeStamp).format('YYYY/MM/DD HH:mm')}
        </div>
        <div
          className="text-base text-[#111] outline-none"
          contentEditable={!!content.length}
          dangerouslySetInnerHTML={{
            __html: content,
          }}
        ></div>
        <div className="flex flex-row justify-between">
          <span className="text-small text-[#989898]">
            {content.split(' ').length} words
          </span>
          <div className="flex flex-row gap-4 text-small text-[#8000FF] max-sm:hidden">
            <span
              className="cursor-pointer flex flex-row gap-1"
              onClick={onDelete}
            >
              <Image
                src={iconDelete}
                alt="icon delete"
                width={18}
                height={18}
              />
              Delete
            </span>
            <span
              className="cursor-pointer flex flex-row gap-1"
              onClick={handleCopy}
            >
              <Image src={iconCopy} alt="icon copy" width={18} height={18} />
              {isCopied ? 'Copied' : 'Copy'}
            </span>
          </div>
        </div>
      </div>
      <div className="flex flex-row justify-between gap-4 text-small sm:hidden">
        <Button
          className="flex-1 rounded bg-white border-[#243c5a] text-[#8000FF]"
          onClick={onDelete}
        >
          <Image src={iconDelete} alt="icon delete" width={22} height={22} />
          Delete
        </Button>
        <Button className="flex-1 button-primary rounded" onClick={handleCopy}>
          <Image src={iconCopyWhite} alt="icon delete" width={22} height={22} />
          Copy
        </Button>
      </div>
    </div>
  )
}
